<script setup lang="ts">
import { reactive, computed } from 'vue';
import TodoItem from '@/components/TodoItem.vue';
import InputTodo from '@/components/InputTodo.vue';
import IconTodo from '@/components/icons/IconTodo.vue';

interface dataEntity {
  title:string;
  status:number;
  id:number;
}


let  delTotal = computed(()=>{
  const _list = todoList.filter(item=>item.status===-1)
  return _list.length;
})

let completeTotal = computed(()=>{
  const _list = todoList.filter(item=>item.status===1)
  return _list.length;
})

const todoList :dataEntity[]  = reactive([{title:'吃饭',status:0,id:1}])
const updateTodoItem = function(id:number){
  let  nowTodoItem = todoList.find((item)=>{
    return item.id === id
  })
  
  nowTodoItem!.status = 1

  console.log(nowTodoItem)
}

const addNewTodo = function(obj:dataEntity){
  console.log('父元素得到',`${JSON.stringify(obj) }`)
  todoList.unshift(obj)
  console.log(todoList)
}


//删除
const delTodo = function(id:number){
  /*let _index = todoList.findIndex((item)=>item.id===id)
    todoList.splice(_index,1) */
  //软删除
  
  let _nowTodoItem = todoList.find(item=>item.id===id)
  _nowTodoItem!.status = -1

}



</script>

<template>
  <main>
    <div class="todo-box">
      <div class="title-bar"><IconTodo />今日任务</div>
      <InputTodo @add="addNewTodo" />
      <TodoItem v-for="(item,index) in todoList" :todoItem = "item" :key="index" @updateTodoItem="updateTodoItem" @delTodo="delTodo" />
      <div class="counts-todo">
        <span>{{ todoList.length }}项任务</span> <span>已完成{{ completeTotal }}项</span> <span>已删除{{ delTotal }}项</span>
      </div>
    </div>
  </main>
</template>

<style scoped lang="less">
  .todo-box{
    width:400px;
    min-height: 300px;
    padding:20px;
    margin:20px auto;
    box-shadow: 0 0 10px 10px #bcc4cf;
    border-radius: 20px;
    box-sizing: border-box;
    .title-bar{
      color:#8aa2c3;
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 20px;
      >*{
        vertical-align: middle;
      }
    }
    .counts-todo{
      span{
        display: inline-block;
        margin-right: 20px;
        font-size: 16px;
        color:#d60;
      }
    }
  }

  @media screen and (max-width : 400px) {
    .todo-box{
      width:100%;
      box-shadow: none;
    }
    
  }
</style>
